<template>
  <div class="balance-card">
    <!-- 可用余额 -->
    <div class="balance-item">
      <div class="balance-header">
        <Icon name="balance-o"
          class="balance-icon" />
        <span class="balance-title">可用余额</span>
        <Icon name="replay"
          :class="['refresh-icon', { 'rotate': refreshing }]"
          @click="refreshBal" />
      </div>
      <div class="balance-value">
        ￥ {{ userStore.userInfo.balance }}
      </div>
    </div>

    <!-- 冻结余额 -->
    <div class="balance-item frozen">
      <div class="balance-header">
        <Icon name="lock" class="balance-icon" />
        <span class="balance-title">冻结余额</span>
      </div>
      <div class="balance-value">
        ￥ {{ userStore.userInfo.freezeBalance }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from 'vant';

import useUserStore from '@/stores/user.store';

import useRefreshBal from '../hooks/useRefreshBal';

const userStore = useUserStore();

const { loading: refreshing, fetchData: refreshBal } = useRefreshBal();

</script>

<style lang="less" scoped>
.balance-card {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  background: var(--van-background-2);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--van-box-shadow);
  margin-left: auto;
}

.balance-item {
  padding: 4px 12px;
  background: var(--van-background);
  border-radius: 6px;
  position: relative;
  overflow: hidden;

  &.frozen {
    background: rgba(var(--van-warning-color-rgb), 0.1);

    .balance-icon {
      color: var(--van-warning-color);
    }
  }
}

.balance-header {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
}

.balance-icon {
  font-size: 12px;
  color: var(--van-success-color);
}

.balance-title {
  font-size: 12px;
  color: var(--van-text-color-2);
  flex: 1;
}

.refresh-icon {
  font-size: 12px;
  color: var(--van-text-color-3);
  transition: transform 0.6s;
  cursor: pointer;

  &.rotate {
    animation: rotate 1s linear infinite;
  }
}

.balance-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--van-text-color);
  line-height: 1.4;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
